<template>
    <div>
        <div class="w-header bf">
            <van-nav-bar
                class="h-nav-bar"
                title='购物车'
                :right-text=rightEdit
                left-arrow
                @click-left="$router.go(-1)"
                @click-right="onClickRight">
            </van-nav-bar>
        </div>
        <better-scroll
            ref="scroll"
            class="scroll-t"
            :bounce="false">
            <ul class="list-main">
                <li class="list-box" v-for="(item,index) in dataList" :key="index">
                    <h3 class="list-title plr15 flex-row">{{item.name}}</h3>
                    <div class="list-item" v-for="(attr,list) in item.items">
                        <van-checkbox-group v-model="result">
                            <van-checkbox class="list-item-group flex-row" :name="attr"></van-checkbox>
                        </van-checkbox-group>
                        <label class="lab-tittle" :for="index">{{item.shipping_name}}</label>
                        <div class="item-list-main flex-row ptb10">
                            <img :src="attr.img" alt="">
                            <div class="flex-1 item-list-intr flex-column">
                                <p class="row1 fs14 ">{{attr.name}}</p>
                                <!--<p class="row1" @click.stop="aaa">颜色：12#川南玛瑙</p>-->
                                <span class="item-list-price theme-color">¥{{computePrice(attr.price)}}&nbsp;<s>¥{{computePrice(attr.mark_price)}}</s></span>
                                <van-stepper class="list-item-steeper" v-model="attr.num"
                                             @plus="updateNum(attr.id,attr.num+1,index,list,1)"
                                             @minus="updateNum(attr.id,attr.num-1,index,list,0)"/>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="shop-null flex-column" v-if="shopNull">
                <div class="shop-null-logo"></div>
                <span @click="$router.push({name:'home'})">去看看</span>
            </div>
        </better-scroll>
        <van-submit-bar
            v-if="rightEdit=='编辑'"
            :price="amountPrice"
            button-text="提交订单"
            @submit="onSubmit">
            <van-checkbox v-model="allCheck" @click.native="onAllCheck">全选</van-checkbox>
        </van-submit-bar>

        <van-submit-bar
            v-if="rightEdit=='完成'"
            button-text="删除"
            @submit="delCart" class="del">
            <van-checkbox v-model="allCheck" @click.native="onAllCheck">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                result: [],
                value: 1,
                dataList: [],
                rightEdit: '编辑',
                allCheck: false,
                cartCount: 0,
                shopNull: false,
                totalAmount: 0
            };
        },
        computed: {
            ...mapGetters(['sid']),
            amountPrice() {
                let total = 0
                this.result.forEach(item => {
                    total += item.price * item.num
                })
                return total
            }
        },
        watch: {
            result: function (val) {
                if (val.length == this.cartCount) {
                    return this.allCheck = true
                } else {
                    return this.allCheck = false
                }
            }
        },
        created() {
            if (this.sid) this.getCartList()
        },
        methods: {
            //获取购物车列表
            getCartList() {
                this.cartCount = 0
                this.$store.dispatch(types.CART_LIST).then(res => {
                    console.log(res)
                    if (res.code !== 0) return
                    this.dataList = res.shops
                    this.totalAmount = res.total_amount
                    if (res.total_num == 0) return this.shopNull = true
                    for (let i in this.dataList) {
                        this.dataList[i].items.forEach(item => {
                            this.cartCount++
                        })
                    }
                })
            },
            //全选
            onAllCheck() {
                if (this.result.length == this.cartCount) {
                    this.result = []
                    this.allCheck = false
                } else {
                    this.result = []
                    for (let i in this.dataList) {
                        this.dataList[i].items.forEach(item => {
                            this.result.push(item)
                        })
                    }
                    this.allCheck = true
                }
            },

            //改变商品数量
            updateNum(id, num, index, list, type) {
                this.$store.dispatch(types.CART_EDIT, {id: id, num: num}).then(res => {
                    if (res.code !== 0) {
                        if (type) {
                            this.dataList[index].items[list].num = num - 1
                        } else {
                            this.dataList[index].items[list].num = num + 1
                        }
                        this.fail(res.msg)
                        return
                    }
                    this.dataList[index].items[list].num = num
                })
            },
            onClickRight() {
                console.log(this.rightEdit == '编辑')
                this.rightEdit = this.rightEdit == '编辑' ? '完成' : '编辑'
            },
            delCart() {
                let that = this
                let ids = []
                this.result.forEach(item => {
                    ids.push(item.id)
                })
                if (!ids.length) return
                utils.dialog.confirm({
                    content: "确定要删除商品吗？",
                    confirm: function () {
                        that.$store.dispatch(types.CART_DEL, {ids: ids}).then(res => {
                            console.log(res)
                            if (res.code !== 0) return
                            that.getCartList()
                        })
                    }
                });

            },
            onSubmit() {
                let ids = []
                this.result.forEach(item => {
                    ids.push(item.id)
                })
                if (!ids.length) return
                this.$store.dispatch(types.CART_PRE, {carts: ids}).then(res => {
                    console.log(res)
                    if (res.code !== 0) return
                    this.$store.commit(types.SET_CART_SUBMIT, res)
                    this.$router.push({name: 'shopping-submit'})
                })

            },
        }
    };
</script>

<style scoped lang="scss">
    .h-nav-bar {
        height: 45px;
        border-bottom: 1px solid #eee;
    }

    .scroll-t {
        bottom: 100px;
    }

    .list-main {
        padding-bottom: 2px;
    }

    .list-box {
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .list-title {
        height: 30px;
        margin-bottom: 1px;
        background: #fff;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .list-item {
        margin-bottom: 0;
        border-bottom: 1px solid #eee;
    }

    .shop-null {
        height: 100%;
        align-items: center;
        justify-content: center;
        padding-bottom: 200px;
        padding-top: 100px;
        .shop-null-logo {
            width: 70px;
            height: 70px;
            background-image: url("../../../public/img/shop_null.png");
            background-size: cover;
        }
        span {
            color: #fff;
            background: $theme-color;
            padding: 3px 10px;
            border-radius: 3px;
            margin-top: 15px;
            margin-left: 10px;
        }
    }




</style>
